<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        ul{
            margin: 50px auto;
            width: 500px;
            border: 4px solid #f00;
        }
        li{
            margin: 10px 0;
            line-height: 50px;
            font-size: 30px;
            background-color: #ff7300a1;
        }
    </style>
</head>
<body>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
    </ul>
    <script>
        //点击li,打印li里面的内容
        let oUl = document.querySelector('ul')
        oUl.onclick = function(e){
            if(e.target.nodeName === 'LI')
            //存储的是触发该事件的元素
            console.log(e.target.innerHTML);
        }
        // let aLi = document.querySelectorAll('li')
        // for(let i = 0;i < aLi.length; ++i){
        //     aLi[i].onclick = function(){
        //         console.log(this.innerHTML);
        //     }
        // }
        /*
            事件委托：利用事件冒泡特性实现。由某个父系节点来管理后代某一个类型下的所有事件
        */
    </script>
</body>
</html>